#(also this answer took a bit because we were just waiting for plugins to come back - apologies!)
Explore tagged Tumblr posts
Note
Hey I'm a fellow ffxiv player and our wols look really similar, it's a hilarious coincidence.
#ffxiv#ffxiv gpose#shura kuroyanagi#(I hope you don't mind the in-character answer!)#(also this answer took a bit because we were just waiting for plugins to come back - apologies!)
11 notes
·
View notes
Text
Halloween Mishap
Request - you should do a pam beesly x reader where the reader is having a halloween party and pam comes over ‘cause she broke up with ron after he hit her and they spill their feelings and it’s cute and you better have a cute jim x luna moment in it you’re welcome - @daisiesonmoneday
Drama/Fluff
Warnings - Oc Insertion (Luna),
Pairing - Pam Beesly X Reader
-><-
-><-
Halloween, one of the best holidays of the year. Well, that’s debatable, but you were sure of it. Sure there were days like Valentines days but what if you had no one to spend it with? Or something like Christmas with no family to spend it with. That leaves Halloween with children dressing up in costumes and going around, trick or treating till they can’t walk anymore.
The spooky holiday also meant the best kind of parties, costume parties of course. Not to brag or anything, but you just so happened to throw the best parties. Well, second best to Jim when he had a karaoke machine and he and Michael went up and sang to their heart's content.
Speaking of parties, yours was due to begin in 10 minutes with you and your roommate, Luna (shameless plugin) are finishing the last minute preparations. By last-minute preparations, of course, that means Luna getting a beer and you pacing the room, going down your list in your head.
You had invited the whole office and some friends from outside of work. Your plan was to get this party to not be a bust but you had invited Dwight and Michael so that was debatable on its own. “Am I missing anything?” You asked Luna, making her look to you and shake her head, taking a swig of the alcohol.
Luna got up from the couch at the sound of the bell ringing, setting down the drink as you went to answer the door. Not to your surprise, it was Jim and his roommate Mark, who had brought his girlfriend. “Hey guys, welcome, come on in.” You say, moving to the side so that the trio could come in.
While you closed the door Luna worked on greeting everyone and sharing a kiss with Jim, who she had started dating as of late. Soon enough more and more people started to show up and the party came to life. With games going and people talking amongst themselves it was almost natural.
Yet there you were, still looking at the door in the hallway, waiting for the one person you want to show up to come. All you wanted was a knock at the door that you would never hear on the count of how loud the music was playing. It was your party but you weren’t there, which left Luna and Jim to take charge and Gods know how that’s going.
Glancing down at your watch, you began to pace the hall, adjusting your costume that you had chosen and made, with the help of one of your friends. With the party going on in the other room, you stared at the door for another moment before sighing and turning, walking down the hall to the party, where Luna and a few others were jamming out to the music, making you laugh.
The neighbors were no doubt pissed at you but you didn’t seem too bothered by that at the moment. You were more concerned with the sight of Dwight and Angela making out in your backyard and Jim nearly falling off of the couch when Luna tripped on the carpet.
The two pairs had all that they wanted. At least it seemed to play out that way. Luna would go on and on about Jim and the girl that you wanted was engaged and ready to be married in June. That left you, your introverted self, with no one but yourself and the fluffy dog that you and Luna had gotten together who was currently sleeping away in Luna’s room.
Drinks went around and you seemed to forget about the girl that never showed up to the party. Rather you had taken to messing around and drinking your problems away. That always seemed to find its way to anyone somehow.
Michael had found some kind of way to make things awkward at some point but that changed after one of your friends had come through the backdoor with another case from outside in his arms. You smiled and the party went on, slowly the number of people started to wind down.
Yet there was no sight of her, the girl you wanted to show up. You had contemplated calling her to see if she was okay but decided against it as to not cause something between her and her fiance. It was just one of those things that you preferred to not get into, no matter how much you hated Roy.
Either way soon enough it was just you, everyone had left and Luna and Jim were asleep on the couch, cuddling. That left you to clean up the bottles as to prevent you from getting ants or Gods forbid mice. The thought of the rodents on its own made you shudder. But that wasn’t the point at the moment.
What got to you was the sound of a knock at the door, making you think that one of your friends had left something and was making a run back for it. But when you walk up to the door, a bottle of beer in hand you open it and are surprised when you’re greeted by Pam. The girl you had wanted to see all night.
Her costume was messed up and her makeup was in streaks going down her face from what you guessed to be her crying. “Pam? Are you okay? Come in, please.” You say, moving to the side and watching her shakily moving into your house. You closed the door, setting the bottle down on a table to your right.
Pam looked around the hall before looking to you, tears in her eyes. “Y/n, I’m sorry for not being able to make it.” She tells you, her voice cracking a bit and you shake your head. It really was no problem at all, you had just wanted her to be there.
“It’s fine Pam. Uh, here, why don’t we go up to my room? Jim and Luna are asleep in the living room.” You offer and she nods her head. “Would you like a water?” She nods her head and you direct her to your room before walking off to the kitchen to get her a glass of water.
In the living room, Jim and Luna had yet to move at all, giving you the okay to walk through and head upstairs. You opened the door to see Pam looking around your room, sadly smiling at it as a whole.
“Hey.” You say, catching her attention. “Here’s your water m’lady.” You say, making her smile at you before she took the water and sat down on the bed. “You wanna tell me what happened?” You ask and she shrugs.
She didn’t know what to say but you could tell that she wanted to. Whatever happened it seemed to be a tricky subject. That on it's own worried you, since it had her shaking.
A sigh leaves her after a moment. “Ron and I got into an argument.” She says and you tense up a bit, shifting in your spot. “It was pretty bad because I wanted to call it off and he got angry.” She tells you, looking down to the ground.
“Pam-”
“I didn’t mean to come in and ruin the mood.” She says and you shake your head, placing your hand on her shoulder.
“You could never ruin the moment. If it’s about your wellbeing then you definitely come first.” You tell her, making her look to you with a smile.
“I just.” She pauses. “I feel like I did something wrong.” She tells you and you tilt your head, smile dropping.
“You could never do anything wrong. I promise you.” You say to her, squeezing her shoulder before standing in front of her. “What Ron did was wrong and bad. You didn’t deserve to be hit, he should never have done that. I would never do that.” You muttered the last part under your breath.
“You wouldn’t?” Pam asks you and you shake your head.
“Never, in a million years.” You tell her, not noticing how close the two of you were until your lips were pressed against hers and her hands were in your hair.
You two pulled apart, breathing heavily. “You have no clue how long I wanted to do that.” She says and you smile.
"Same here." You say and all you can think is. Never in a million years.
29 notes
·
View notes
Text
Javascript and SEO – Everything You Need to Know about Crawling, Indexing & Ranking
The relationship between JavaScript and SEO started a long time ago and has been a highly debated topic in the virtual world, mostly in the SEO circles. Creating websites using JavaScript to feature content was a big hit back in the days. Many developers used this technique, with some lacking knowledge on whether search engines can parse and understand that content.
Along the way, Google changed its methodology and standpoint regarding JavaScript. Everybody started to doubt whether search engines, like Google, are able to crawl JavaScript. And that was the wrong question to ask. The better question to ask is can search engines parse and understand the content rendered by Javascript? In other words, can Google rank your website if it’s made in Java?
Before starting to answer this question, we need to get some things straight. First, we should talk about how JavaScript works and how it is implemented, then understand how a website using JavaScript can be properly crawled and indexed, then afterward ranked and if search engines can do all those actions for a website using JS code.
What is JavaScript and How Does it Work?
Crawling. Indexing. Ranking – The Three Musketeers of SEO
Googlebot vs. Caffeine in the JavaScript Rendering Process
How Javascript Affects SEO
How to Make Your Javascript SEO-Friendly
Conclusion
1. What is JavaScript and How Does it Work?
JavaScript is one of the most popular programming languages to develop websites. It uses frameworks to create interactive web pages by controlling the behavior of different elements on the page.
Initially, JS frameworks were implemented client-side (front-end) only in browsers, but now the code is embedded in other host software, such as server-side (back-end) in web servers and databases, which will save you from a lot of trouble and pain. The problems started when JavaScript implementation relied only on client-side rendering.
If JavaScript frameworks have server-side rendering, you’ve already solved the problem before it even arises. To understand better exactly why problems appear and how can you avoid them, it is important to have some basic knowledge on how search engines work. For that, we need to establish the phases of the information retrieval process: crawling, indexing and ranking.
2. Crawling. Indexing. Ranking – The Three Musketeers of SEO
When we talk about Javascript and search engine optimization we need to look at the first two processes: crawling and indexing. Ranking comes afterward.
www.slideshare.net/ryanspoon
The crawling phase is all about discovery. The process is really complicated and uses software programs called spiders (or web crawlers). Googlebot is, maybe, the most popular crawler.
The crawlers start by fetching web pages and then follow the links on the page, fetch those pages and follow the links on those pages and so on, up to the point where pages are indexed. For this method, the crawler uses a parsing module, which does not render pages but only analyzes the source code and extracts any URLs found in the <a href=”…”> script. Crawlers can validate hyperlinks and HTML code.
An important thing to keep in mind is the fact that when you perform a search on Google, you are not searching the web, but on Google’s index of the web. The index is created by all the pages during the crawl process.
You can help Google and tell the crawler which pages to crawl and which not to crawl. A “robots.txt” file tells search engines whether they can access and crawl your site or just some parts. Using this method, you give Googlebot access to the code data. You should use the robots.txt file to show Google exactly what you want your user to see, because otherwise, you may have pages that will be accessed and don’t want to be indexed. Using this tool, you’ll be able to block or manage various crawlers. Check your robots.txt file to avoid errors and ranking drops. Nowadays, most robots.txt files include the XML sitemap address that increases the crawl speed of bots, which comes as an advantage for your website.
In the crawling process, Googlebot has the main role. On the other side, in the indexing process, Caffeine is indexing infrastructure and has the main role.
The indexing phase is all about analyzing the URL and understanding the content and its relevance. The indexer also tries to render the pages and execute JavaScript with a web rendering service (WRS). You can find out exactly how WRS sees your page if you go to Search Console and use the Fetch and Render feature.
Client-side analytics may not provide a full or accurate representation of Googlebot and WRS activity on your site. Use Search Console to monitor Googlebot and WRS activity and feedback on your site. Google Developers
Practically, these two phases work together:
The crawler sends what it finds to the indexer;
The indexer feeds more URLs to the crawler. And as a bonus, it prioritizes the URLs based on their high value.
The whole concept of the relationship between crawl and index is very well explained by Matt Cutts in the “How Search Works” video:
youtube
Once this stage is complete and no errors are found in the Search Console, the ranking process should begin. At this point, the webmaster and SEO experts must put effort into offering quality content, optimizing the website, earning and building valuable links following the quality guidelines from Google. Also, it is very important that the people responsible for this process be informed of the Rater Guidelines.
3. Googlebot vs. Caffeine in the JavaScript Rendering Process
All the problems began when people started confusing Googlebot (used in the crawling process) with Caffeine (used in the indexing process). Barry Adams talked about the confusion between these two. There’s even a thread on Twitter about it:
The use of 'Googlebot' in there confuses me. The crawler doesn't render, does it? Caffeine is where pages are rendered?
— Barry Adams (@badams) August 5, 2017
The explanation is quite simple: the crawler doesn’t render content, the indexer does that. The crawler fetches the content. People say the crawler helps Google to index the content, which is misleading. And because of that the confusion developers and SEOs ask if Googlebot can crawl and index JavaScript, and we tend to say “yes”. Google can render JavaScript, extracts links from it and ranks those pages. We think of Google as a whole, which includes multiple processes (it fetches and then renders).
Even if it is a little bit overwhelming to understand how the process of crawling and indexing is connected, it is easier to use JavaScript. We can see that Google has tried lots of time to make a lot of improvements and crawl all of our website’s pages.
It has lots of guide on how search engine optimization works, how developers should design websites and how content writers should create white-hat content. That is how the crawl budget term took birth.
4. How Javascript Affects SEO
JavaScript means more loading time speed and faster server load (code functions run immediately instead of waiting for the server to answer), easier implementation, richer interfaces and higher versatility (can be used in a huge variety of applications). But, JavaScript SEO brings some problems along the way. Lots of webmasters fail to optimize the content that uses JavaScript code.
So, the question that pops out is: Does it matter that not the crawler takes care of JavaScript, but the indexer? Is it important for the webmaster to know such things? Well, the answer, in this case, is yes, of course. It is very important for them to know the difference in case of errors. They should know how to resolve them and get the outcome they desire, that is Google ranking JavaScript pages.
Now, you can understand that knowing how search works, how a website is created, and the relationship between JavaScript and SEO. We can ask the right questions. Because now we have the correct answers, also.
“Does Google crawl JavaScript?” The answer is no.
“Does Google index JavaScript?” The answer is yes.
“Should I use JavaScript?” The answer is it depends.
JS website is indexed and ranked. We’ve learned things the hard way until now. We know that making it easier for Google to understand the generated content is the best approach. To help Google rank content that uses JavaScript, you need tools and plugins to make it SEO-friendly. When we make our content easy to discover, and easy to evaluate, we are rewarded with better rankings in SERPs.
Even if JavaScript has some limitations and Google has some issues with it, most of the problems these websites have, are a result of bad implementation, not Google’s inability to deal with JavaScript.
5. How to Make Your Javascript SEO-Friendly
Back in 2009, Google recommended the AJAX crawling, which had changed in 2015, saying they no longer supported that proposal. In the beginning, search engines were not able to access content from AJAX based websites and that caused real problems. That basically meant the system couldn’t render and understand the page that was using JavaScript for generating dynamic content, therefore the website and user suffered from this. At that time, there were lots of guidelines to help webmasters index those pages.
Historically, AJAX applications have been difficult for search engines to process because AJAX content is produced dynamically by the browser and thus not visible to crawlers. google developers
In 2015, 6 years later, Google deprecated their AJAX crawling system and things have changed. The Technical Webmaster Guidelines show that they’re not blocking Googlebot from crawling JS or CSS files and they manage to render and understand web pages.
Today, as long as you’re not blocking Googlebot from crawling your JavaScript or CSS files, we are generally able to render and understand your web pages like modern browsers. Google Developers
And there were other problems that needed to be solved. Some webmasters that were using JS framework had web servers that served a pre-rendered page, which shouldn’t normally happen. Pre-rendering pages should follow the progressive enhancement guidelines and have benefits for the user. In another case, it is very important that the content sent to Googlebot matches the content served to the user, both how it looks and how it interacts. Basically, when Googlebot crawls the page, it should see the same content the user sees. Having different content means cloaking, and it is against Google’s quality guidelines.
The progressive enhancement guidelines say that the best approach for building a site’s structure is to use only HTML, and after that play with AJAX for the appearance and interface of the website. In this case, you are insured, because Googlebot will see the HTML and the user will benefit from the AJAX looks.
The JS code issues can be cured with the help of tools. There are a lot of examples and solutions. JavaScript can be crawled by search engines if, for example, you use Prerender, BromBone, Angular JS SEO (which is Google’s own JavaScript MVW framework), Backbone JS SEO, SEO.JS or other frameworks like React and single page applications (SPA) and progressive web apps.
To put it simply, when Google is indexing a web page, it is reading the templates and not the data. That’s why it is necessary to write codes for the server that will send a version of the site (that does not have JavaScript) to Google. In the client-rendered JavaScript, links were always a problem, as we never knew if Google was able to follow the links to access the content.
Google recommends you to use their Fetch as Google tool to allow the Googlebot to crawl your JavaScript. Search Console offers lots of information regarding your website. You have two sections entirely dedicated to Crawl and Index Status:
Another thing you could do, besides using Fetch as Google, is to check and test your robots.txt file from the Search Console, too. The Google Webmaster Tool robots tester allows you to check each line and see each crawler and what access it has on your website. If you take a look at the next screenshot you can see how it works:
Conclusion
Today’s article focused on technical SEO and mostly targeted developers and SEO experts. JavaScript and SEO is a complex discussion with lots of gaps and misunderstandings, that need further explanation to get things straight once and for all.
The information retrieval process includes crawling, indexing and rankings. You surely heard of them before, but what you didn’t know is that lots of people are confused on how crawling and indexing work together and what each process does. We’ve seen that in the crawling phase the website is fetched, then in the indexing phase the site is rendered. Googlebot (the crawler) fetches the website and Caffeine (the indexer) renders the content. The problem started here when most people confused these two and said that the crawler helps Google to index the website.
Developers should know the difference between Googlebot and Caffeine and what each one of them does in order to use JavaScript in a friendly relationship with SEO. JavaScript had a lot of advantages, but SEO friendly is not one of them and can be hard to achieve.
We know that a JavaScript website’s content is indexed and ranked. But the harsh truth is that it’s done almost reluctantly. In order to have relevant content ranked in Google and achieve great success in organic search, you have to offer the content and links in plain HTML to search engines. In the end, efficiency is what matters, making these 3 processes as easy as possible: crawl, index, and rank your web pages.
The post Javascript and SEO – Everything You Need to Know about Crawling, Indexing & Ranking appeared first on SEO Blog | cognitiveSEO Blog on SEO Tactics & Strategies.
0 notes
Text
How Your Website’s Theme Affects SEO & Rankings
The advent of CMS (Content Management Systems), such as WordPress, has revolutionized the internet, with around 5-10 websites being built every single second. If websites were built before only by professionals, today anyone can create a website in a matter of minutes, with little to no coding knowledge.
That creates lots of opportunities, but also comes clogged up with many problems.
After an easy 5 minutes install process, one of the first things most people want to do is customize the aspect of their new website. This isn’t hard to do. But how does the website’s theme influence your rankings and your overall SEO?
Why and How Do Themes Affect SEO?
Ugly Design Can Scare Users Away
Slow Speed Will Bore the Users to Death
Bad Structure Will Puzzle Search Engines
What Makes a Theme SEO Friendly?
HTML Markup
Speed & Page Size
Responsive Design & Images
Structured Data
Content Prioritization
API Hooks
How to Find an SEO Friendly Template
Check the Images
Check the Headings
Use the Rich Snippets Testing Tool
Send Them an E-mail
Fix the Theme Yourself
Why Are There So Many Bad SEO Themes Out There? (+ A Call to Developers)
Use Less Sliders (or ‘Useless’, You Can Read It Both Ways)
Optimize the Theme’s Core Images
Make Use of the ‘srcset’ As Much As Possible
Don’t Ignore PageSpeed Insights Completely
Minify the Codes If Possible
The problem, however, is that most users only think about the visual aspects of a theme, completely ignoring the technical ones. Even more, almost every template out there comes up with the phrase “SEO optimized” in the description, many times misleading the user into thinking it will solve SEO issues for them (more on that later in the article).
So after some time, when amateur webmasters start to learn about SEO, the question finally pops up:
“Should I change my template? Can the website theme affect my SEO?”
The short answer is yes, a theme can affect your SEO. I spotted what the source of the issues might be, and, to find out more, I took the effort to ask a couple of theme developers about it. Together, we came up with this article, intended to answer questions for both users and developers.
Knowing these technical aspects can help you make a more educated decision when purchasing a theme. You’ll still have to optimize your site for the best results, but the theme can help you solve a lot of problems from the start.
While I will be talking a lot about WordPress, these things apply to other CMSs, such as Joomla, Drupal and Magento.
Why and How Do Themes/Templates Affect SEO?
A long long time ago, SEO used to be very easy. Put up a bunch of keywords somewhere, and you were all set. If that wasn’t enough, just build some links and you’ll definitely rank.
Today, however, a lot more search ranking factors have been developed, from necessity. A lot of people have been abusing the old ways of doing SEO, so optimization had to adapt in order to return useful results for the users.
Design aside, themes and templates are a very big part of a website’s structure, and they also can affect speed. If you don’t get all of these three things lined up and working well together, you’re prone to see lower rankings, even if your content is good.
Ugly Design Will Scare the Users Away
If your design is too clogged up with things, it might turn off readers. You have to find a balance between ad and content placement, user experience and looks. Don’t think just about what you like, but think about what your target audience might like.
For example, many people tend to create their websites using a flat design, but sometimes, flat design actually causes confusion for the users because they have no idea where they can actually click. This can eventually affect your revenue and overall rankings.
You can clearly see at the bottom of the left picture that people focused more on the target link, because the target link was uppercase, bold, blue and underlined, instead of just having the same font. On the other side, people focused more on the heading, as the click signal was not strong enough.
Since the heading wasn’t actually clickable, this could have led to a bad user experience, as people would try to click the heading in vain. Google uses user experience as a ranking factor, so getting people to navigate your site easily is a good idea.
Sometimes, you have to give up on your favorite version of the design, simply because it doesn’t work as well. With a little bit of extra work you can find the right balance.
Slow Speed Will Bore the Users to Death
People hate it when they have to wait a long time for websites to load, and truth is most websites load really slow. On 3G mobile connections, the average load time for a website is 19 seconds. It’s estimated that about 50% of users leave a website if it takes more than 3 seconds to load. This will increase your bounce rate and reduce your revenue.
One of the solutions Google brought us are Accelerated Mobile Pages. However, these pages are still limited in a number of ways, and many webmasters don’t want to use them.
If a user leaves your website or blog before it even loads, clearly their experience with it was 0. Google notices this and tries to return the fastest loading results to its users.
You theme has to help the site load pages as fast as possible in order to keep visitors happy.
Bad Structure Will Puzzle Search Engines
Search engines don’t really see the website. Instead, they see the code behind it. If that code is not well structured, and HTML tags aren’t correctly placed, search engines won’t understand what the website is about very well.
For example, many templates could be using multiple H1 tags to style text on the homepage. Good for design, but bad for SEO. Hell, many templates could be ignoring the headings altogether, leaving your pages with just the title tag and some divs. Google can still understand the text in the divs, but the important content won’t be highlighted anymore.
Structure is also closely related to speed. The code has prioritized the loading of the visible content. This content is often referred to as ‘above the fold’. Even if your website loads fast, if certain elements that are towards the bottom of the page are loaded before the ones at the top of the page, search engines will notice it and consider it a bad practice.
What Makes a Theme SEO Friendly?
Let’s get things straight: a theme or template has the main purpose of making your website look good. Being SEO Friendly is a side benefit. But this side benefit is so demanded these days, that almost every theme out there is now “SEO Optimized” or “SEO friendly”.
Really. Go on and visit ThemeForest and check out the WooCommerce section. Open up the first 3 premium themes that pop-up and do a CTRL + F search for SEO.
Vlad Olaru from PixelGrade and Tom Usborne from Generatepress both disclose the SEO capabilities of themes and templates:
A WordPress theme does not represent a WordPress based website. It is a very important part of it but it has its limitations. A template can’t account for a bad server, not using a cache plugin or not writing relevant titles and content. VLAD OLARU Co-Founder and Developer at PixelGrade / @vladpotter
Content is the most important factor when it comes to ranking high, so the best thing a theme can do is keep things fast and let the content do the rest of the work. Thomas Usborne Founder and Developer at GeneratePress / @tomusborne
Sure, content is one of the most important parts of a website, and templates do not have full responsibility on making your website SEO friendly. They don’t affect things such as URLs or the entire site architecture.
However, what templates do affect is every single page on your website, be it in a negative way or in a positive way.
You see… a website template can be just like an uncomfortable suit. It looks good, but walking in it all day long doesn’t work too well.
So what exactly makes a theme SEO friendly?
I’ll give you a hint: having a titles and meta descriptions section built in a theme won’t make it SEO friendly. For that, we have WordPress SEO by Yoast. Adding options like these will only make it heavier.
That being said, here are some things to consider when determining the SEO friendliness of a template, from both Tom and Vlad, as well as cognitiveSEO:
HTML Markup:
The HTML is the most important part of a theme’s SEO friendliness. It stands at the core of what search engines see. Templates have to make it easy for search engines to digest the content of the website. The HTML5 tags must be wisely used in order to correctly highlight the most important parts of the content and their subordinates.
If the HTML doesn’t make sense, and title tags, for example, stand at the bottom of a page instead of the top, Google won’t like that. Now that is a very unlikely case, but as I said earlier, some premium themes completely miss out on all the headings.
Most web developers comply with quality guidelines when it comes to coding HTML, but if they don’t know the fact that H1 tags carry more weight in search engines, they won’t use them wisely.
Speed & Page Size:
People don’t like it when websites load slowly. A poorly developed theme can cause websites to load slowly. Of course, other factors are involved, such as the server or the user’s internet connection and device performance.
Still, a theme should first try to render the upper part of the website, called above the fold. If other elements from the bottom load before, the site will appear to be loading slowly.
When parts of the website start rendering chaotically, users might think the website is bugged out or broken. If you ever saw a website that first loads plain text and then renders the graphics and positions, you’ll know what I’m talking about.
The code files should take up as little space as possible. For example, calling a class twice will take up more space than just calling it once.
.class { text-align:center; } .class { color:red }
.class { text-align:center; color:red; }
Some files can also be minified, which will reduce download time even more.
Responsive Design & Images
Today, responsive design is the standard. If your website doesn’t load well on mobile devices, you can lose more than 50% of the traffic. Having a single design and code that fits all screen widths well is hard to achieve. Most responsive designs use the same CSS file for all widths, although there is an option to load them separately:
<link rel='stylesheet' media='screen and (min-width: 768px) and (max-width: 901px)' href='css/tablet.css' />
Although it’s good to save as many as possible, CSS codes don’t take up too much space.
Images, on the other side, are by far the most problematic thing when it comes to websites. It makes them slow, and displaying the perfectly sized image for each and every screen width is almost impossible. Developers should use the ‘srcset’ attribute on images to load the image size closest to the width of the screen. There’s no point in downloading a 1000×1000 pixels image if you’re going to display it as 500×500.
Structured Data
Schema.org markup is really useful for engines. This is especially the case when it comes to eCommerce sites. Search engines can display certain parts of your website directly in the search engine, making your result stand out. These results are called rich snippets.
One of the most common types of rich snippets is the review stars snippet:
Other snippets can include things such as the price:
Content Prioritization
A theme should effectively point out to the search engines which part of the content is most important and should also avoid creating duplicate content. Content tabs in highly customizable templates should use the proper HTML tags.
If you’re adding a ‘content section’ through a builder, that section should contain <p> tags. A ‘heading section’ should be wrapped up in H1, H2, H3 tags. If you can add an image somewhere, outside of the WordPress library, it should also have an ‘alt’ attribute.
Modifying codes for these kinds of features/builders can be a headache, so themes should take care of it from the beginning.
API Hooks
This is a rather technical aspect about the theme, which you can’t really find out without asking, but it’s a really important one. Without these Hooks, none of the helpful SEO plugins will be able to improve the performance of your website properly.
This means that any modification to your website will require custom theme intervention, which is usually very expensive.
How to Choose a Good Theme for SEO
Choosing a good theme from the start is the best thing you can do, but chances of you reading this article before creating your first website are small. Well, at least you can use this in the future.
If you think the current website template might be affecting your SEO and are planning to change it, make sure you also check out this redesign checklist, created especially to help you avoid any SEO disasters.
Furthermore, don’t get tricked by PageSpeed Insights! Although it’s a good way to determine the quality of a site’s HTML structure, PageSpeed Insights can sometimes be misleading, especially when looking on a demo theme.
Usually, PageSpeed Insights generates the scores accordingly. For example, if you have 100 images on your website, and 100 of them need optimization but you save only 10kb from all the optimizations, the score will be higher than if you had 100 images on your website and only 2 needed to be optimized, but the optimization would save 100kb.
But, in the following case, the SnapStore theme demo has an astonishing 0/100 PageSpeed Insights score. It’s the worst I’ve ever seen, but here’s the deal: although they should, developers won’t spend time on optimizing these pages. The servers could be bad, and these installs have no optimization plugins.
In this case, the biggest reason are the images, as they are all about 2MB in size. You can easily compress them from 2MB to 100KB and save 95% without losing any noticeable quality. I would post the difference, but I don’t want to load a 2MB file on this article. You can do the test anytime by downloading the first slider image from the theme with the Inspect Element tool. Use TinyPNG to compress the file, and compare the two versions.
While the images could be optimized, the truth is that’s your job, because you’ll change the presets anyway. The server response time also has a very big impact on the score, but that’s not your server, it’s theirs. Put this theme on a good server and you won’t have issues. Caching, again, is nothing theme related, so you can ignore it. That will be fixed by a plugin.
What about the render-blocking JavaScript? Surprise! It’s actually Google. You have no control on some of the JS files such as Analytics, Tag Manager or the fonts. Tom from GeneratePress also pointed this out to me: Google errors their own JS files in PageSpeed Insights.
The only thing that’s left is Minification, which can be in fact fixed with a plugin as well.
Check the Images
As I mentioned, most of the images on the template will be replaced. It’s your duty to make sure you filter them through a website like TinyPNG or a plugin like WP Smush. The only images you should check for compression are the core images of the theme. I’m talking about any icons, backgrounds and images you won’t be replacing.
A more important thing is whether the images are using the ‘srcset’ attribute. This will make them load proper versions for each screen size. To do this, right click an image in Chrome and click Inspect.
As you can see above, both GeneratePress and Silk (a PixelGrade theme) take advantage of the ‘srcset’ attribute to properly display images on different screen sizes.
Most of the time, WooCommerce templates will use this function only for products images, because it’s a basic WooCommerce feature. However, they might miss other areas, such as page builders. Make sure you check more than one image, from more than one page.
Check the Headings
If you’re looking for a customizable theme, make sure the customization options use the code and tags wisely.
Hit up CTRL + U on your demo theme and do a search for ‘<h1’ and ‘<h2’, without the quote marks. If no headings pop up, then something is strange. Each page should have an H1 tag. No more, no less. There can me multiple H2 tags, but if each of them has a different font style and size, then something is fishy.
Sometimes, the designers trick you with the looks. Take a look at this beauty, for example:
If you look at the headline as a human, you will read “We are experts if it comes to watches.” Read the headline as a search engine, however, and it’s a completely different story:
It now reads “We are if it comes” and “Experts to watches”. Not good for SEO if you’re trying to match some keywords in your headline.
Use the Rich Snippets Testing Tool
If you’re looking at an eCommerce template, you should check out the structured data markup with Google’s structured data testing tool. Check out the homepage, as well as single product pages, category pages and articles.
Take a look at the product page, and check out the product attribute. Make sure it has no errors.
Sometimes articles also have the schema.org markup for recipes. You can view more structured data markup types here. If anything fits your niche, you should try to find a template that provides this.
Send Them an E-mail:
Send an e-mail to the developers, asking them about the features of the theme. If they respond fast, that’s a good sign. It means that they are active and ready to support you if you have any issues with the tempalte.
As almost nobody posts this, you can also ask for a screenshot of the backend section, so you can view the theme from the inside. Ask the developers any questions regarding the points mentioned above.
It’s also a good time to ask if the template uses the default WordPress Hooks that make the template compatible with other plugins.
Fix the Theme Yourself
You don’t always have to choose the best theme. You can always fix most of the things. There’s only one little issue. The whole site might crash.
Start by adding a caching plugin. This will speed up the site for recurring users. Then, add an image optimization plugin to make your images take up less space. Last but not least, try a minification plugin. However, be careful, as minifying theme files can cause render issues or crashes.
Minifying a theme’s CSS, JS and HTML using a plugin can affect how a theme displays and potentially crash the whole site.
Why Are There So Many Bad SEO Themes Out There? A Call to Developers
Now both Tom and Vlad built incredibly good themes, both SEO friendly and customizable. But out there, there are a lot of themes that don’t focus on SEO at all. There could be many reasons why this is happening.
Theme developers try to figure out the users’ intent and needs. The truth is, users look for the most features they can get in a single place, at a low price. But, one theme can’t fit them all. Having everything (which you never use) in a single template is just gonna make your site heavy and slow. For example, if you don’t use a slider on a specific page, the JS slider script might still be downloaded, making your site slower. This isn’t always the theme’s fault, as plugins usually generate codes like that as well.
So from this rush of making hundreds and hundreds of themes to fit everyone’s needs, bad ones turn out as well.
Another thing could be that developers simply don’t think about SEO. But since Google is desperately trying to speed up the internet with things like Google AMP or clean it with things like the interstitials penalty, it is obvious that they should.
Use Less Sliders (or ‘Useless’, You Can Read It Both Ways)
Almost every site there has a slider. But sliders aren’t that cool. Even Yoast agrees on this one. Sliders are slow and they require a lot of coding to get them to work. Animated ones even load dozens of images, creating multiple requests to the server and adding to the overall page size.
The truth is people only see the first slide most of the time. They rarely click sliders. Multiple offers on the same page can also be very confusing. You’d be better off just displaying a single image with your best overall offer.
Optimize the Theme’s Core Images
Of course, you can’t make sure the users add their titles, content and images correctly, but themes do have images by default, such as backgrounds and social media sharing buttons. They might not seem relevant, but saving even 10 KB in size could make your site load faster. If your total page size is 100KB, that would be a 10% improvement.
There are also many images from your theme that people might like and just leave them there. If they aren’t generated from the media gallery so they can be optimized by a plugin, then they should come optimized by default. Most users aren’t very tech savvy and won’t know how to deal with it themselves.
Make Use of the ‘srcset’ Attribute As Much As Possible
Responsive is hard and frustrating. But it’s awesome and it looks fantastic. Try to also make it load fast by not wasting time to load big images and display them small. Always use the ‘srcset’ image attribute. Even if it’s a photographer’s website, you still don’t need the full images. You can load them separately when a click occurs.
There is an option for backgrounds too. It’s still in development and only supported by the major browsers, but it’s there. Use it wisely if you every need to add background images on responsive designs.
Don’t Ignore PageSpeed Insights Completely
Yeah, it’s funny. Google fails by returning errors to their own files. But that’s not the point. The point is for you to spot issues that you can fix, and fix them.
But think about it like this:
Since Google recommends using it, they are probably using those things to rank websites as well. It must have at least a slight impact on the algorithm’s decisions.
Speed isn’t always the answer for crawlers and bots as speed is relative to the connections. The structure of the page is absolute. If you have a really fast web hosting and your users also have strong connections and computers, that doesn’t mean you should ignore the structure.
Minify the Codes If Possible
I know you like your code pretty. I do as well. But on the web, speed is of the essence. The code lies behind what the user can see, and search engines can very well understand minified code, even though it might be hard to decipher by humans. This also applies to plugin developers, as many theme developers actively implement plugins into their themes.
Rarely will someone take a look at the underlying code, and if they do, you probably don’t want them to understand anything. It makes it harder for them to copy something you did. If they want to know something, they might as well ask you directly.
I know that there are plugins out there that can minify code, but they can and most of the time WILL create problems. Minify as much code as possible on your live versions so that your users don’t risk breaking their sites.
Conclusion
As you can see, themes don’t only impact the design of a website, but SEO as well. If your theme doesn’t help with making your website quick for users and easy to read for search engines, it will affect you in a negative way, and can sabotage tyour entire campaign on the long run.
Make sure you check some of the things mentioned in this article the next time you’re searching for a new website template.
I want to thank Tom and Vlad very much for helping us create this resource. If any of you have questions or opinions, feel free to leave them in the comments section.
The post How Your Website’s Theme Affects SEO & Rankings appeared first on SEO Blog | cognitiveSEO Blog on SEO Tactics & Strategies.
from Marketing https://cognitiveseo.com/blog/15564/theme-affects-seo/ via http://www.rssmix.com/
0 notes
Text
ON1 Photo 2017 editor gets a major update
Launched today, the all-in-one photo organizer, editor, raw processor, and effects app, ON1 Photo 2017.5 has a trial version those interested may want to try… without using the program as an app of something else. Try it, if you dare.
It always puzzles me how some people have Frankenstein combinations when it comes to the software included in their workflow, as I try to keep mine as simple as possible. This is not to say I will not use something different now and then, but I tend to stick to a workflow that depends as much as I can from a combination which does not duplicate functions.
While I do understand we all have different needs and points of view, it makes no sense, for me, to try to include a software like ON1 Photo RAW in a workflow where Lightroom and Photoshop (with only one of them, maybe…) are already present. Still, that’s what I see in many conversations online. People seem to forget that what ON1, the company, is offering now, has not much to do with the apps and presets that once were the core of their business. The different tools from ON1, including the unique Genuine Fractals that once was the bread and butter for enlarging digital photo files, became one single tool, served under an interface that helped it to become a photo editor. We saw that goal gaining shape in the last editions of Perfect Photo Suite, and it became evident in ON1 Photo 10, already presented as, optionally, a standalone editor for photography.
In fact, already in 2013 ON1 (or OnOne Software in the old days) announced that they were offering the “photographer’s choice for photo editing”, when launching Perfect Photo Suite 8, presented as the company’s first standalone photo editor. So, the trend started there, with ON1 Photo 10 launched in September 2015, to replace Perfect Photo Suite 9.5.
A standalone photo editor
Those entrenched on Photoshop and Lightroom may still be reticent to accept it, but as the landscape for Non Linear Editors in video is changing, so is it for photography. Lightroom surely did make the initial bold step in some crucial areas, but there are, nowadays, multiple applications to choose from, and solutions like Affinity Photo or ON1 Photo 10 are material examples of that change. New users will, many times, include these programs in their main workflow.
Despite it being able to work standlone, ON1 Photo RAW works as a plugin for Adobe Photoshop and Lightroom, because ON1 does not want to sever ties with a market that represents part of its business. Their presets and effects extend functionalities for both Adobe programs, so it makes no sense to stop exploring that option. After all, that’s what other companies, like Topaz Labs, which recently launched their own editor, Topaz Studio, continue to do: offer a standalone editor but allow users to use their software as a plugin.
It is possible, in fact, to use ON1 Photo RAW as a plugin, I am told – as I use neither Photoshop nor Lightroom – but what ON1 really wants is users to explore the potential of their software completely, as they confirm with the launch of a new version, ON1 Photo 2017.5, which is presented as the company’s “NEW all-in-one photo organizer, editor, raw processor, and effects app”, to which they add “just what you’ve been waiting for.”
This new version updates the program, irons known bugs (and may well introduce some new ones, as usual with software…) and introduces features that were asked by users. I have been playing with a pre release build and I took the time to use it as my “do everything” editor, just to be sure it worked as promised. I am familiar with ON1’s software since the initial years and although I am not a heavy user of presets and effects, I’ve a keen interest on any new editor for photography launched, so I’ve kept an eye on the products introduced since Perfect Effects 8, the first standalone editor.
The Lightroom Migration Assistant
One important aspect of this new version is the Lightroom Migration Assistant, a tool that allows users to migrate photos, their metadata and collections from Lightroom to ON1 Photo RAW 2017.5. The tool is ON1’s answers to the requests from many users, apparently, and if it is so, it suggests many people want to run away from Lightroom’s catalog, and move their images to a “catalog-free” environment, something I completely understand.
I did not try the tool, because I’ve nothing to migrate from LR, as I do not use it. I hope it works, because it will help those willing to try a new approach to DAM to migrate to the browser present in ON1 Photo 2017. One of the aspects that ON1 improved in this version of the program is Search, which allows using a variety of metadata field and decide if the search must match all or any of the search criteria. I tried it and it works perfectly for me. It not only allowed me to search using the filename or any keywords I might have used on my files, it also allows to search by camera, lens, ISO, rating and many other options, making it easy to browse through your archives.
One aspect that improves search options and makes complete sense, if you decide to use ON1 Photo 2017, even if only for its DAM options, is to index your archive instead of just browsing through the folders. It allows a faster and more efficient search, and, I believe, it helps to make for a faster use of the photo editor. Although I may be wrong, I believe one of the problems often mentioned by people – the program not being as fast in their computers as it appears to be on the demonstrations – has to do with the fact that the photographers demonstrating the program have indexed their archives. Even if you do not index the whole archive, doing it to the folders you use the most might be a good way to improve the workflow. Another thing that ON1 Photo RAW allows is the creation of “smart folders”, which work in a fashion similar to Lightroom.
New tools and changes to the interface
Speed is, apparently, one of the problems many have in terms of the program. My photo editing machine is a Windows 10 64-bit computer, with a i7 4770, Nvidia 1060 6GB 16GB RAM and a 30 inch monitor, and I, sometimes, feel this pre release build slows down. Indexing some of my archive confirmed me that the building of thumbnails was faster, afterwards, and apparently that helps. One moment when the program slows down is when exporting a file, but considering that’s when all the editing done to a file is “cooked” into a final JPEG or whatever format you’re exporting, it may make sense. This said, I believe/hope ON1 can sort this out as the program evolves. Because, they continually say ON1 Photo 2017 is an evolving platform they want to adjust so it fits the needs of users.
Exploring this version one has to believe that they are trying. One of the features I really liked is the new Compare Mode, which allows users to select a series of photos (up to 15) and zoom and pan each of them and all at the same time. Nothing that I know comes close to it and I like the fact that I can adjust each window so I get the exact same area visible, to check sharpness, for example.
There are also some changes in the interface that make it, at least from my point of view, more logic in terms of workflow. For example, now Sharpening and Noise Reduction, which are improved, have been merged into a new Details Pane in Develop for global corrections tailored for raw photos. This gives me access to all the essential tools without having to open more panes to use them.
The Clone Stamp is also in a new position now, inside Develops and Effects, as part of the non-destructive workflow, instead of Layers. I believe it makes sense, because the way On1 Photo 2017 works you might not use Layers that much. Besides, the Clone Stamp continues to be the “secret weapon” that one picks up when the “content aware” intelligent tools – no matter how intelligent they are – fail to work as expected. Being essential, the Clone Stamp now has the place it deserves within the workflow from ON1 Photo 2017.
One license for five computers
A Lens Correction pane is now present in the program, as asked by users and promised by ON1. It does nothing revolutionary – as apparently some expected it would do… – but fulfills its mission, offering the usual tools for any Lens Correction tool. As usual, too, it will automatically detect supported lenses and reduce distortion, chromatic aberration and peripheral fall-off. Manual override is there if you feel you need to adjust something.
“Auto” is a feature you’ll find as an option in many of the panes for the different functions. I must say I like it a lot, as it gives me, most of the time, a good starting point to tweak further. I also like the way the program works with “layers” when you use one of the presets, showing you different aspects of the operation. I believe people can learn a lot looking at those things, if you ever get people to stop being lazy and exploring ON1 Photo RAW on its own and not so much as an extension of LR and PS. There is so much potential under the hood that it is a pity if you only touch the surface.
Presets continue to be a strong feature of the software, and for those who use them a lot, there are some new things to know. There is a new Insert Preset command available to stack Presets in Effects, and the preset management has been improved, with it being possible to delete and rename preset categories as well as export categories for sharing and back-up.
The version which is now available also updates the number of cameras with which ON1 Photo 2017 is compatible, with models as Apple iPad Pro 9.7, Canon EOS T7i/ 800D / Kiss X9i, Canon EOS M6, Canon EOS 77D / 9000D, Fuji X100F (compressed), Huawei Mate 9, Panasonic LX10, Olympus Pen F, Panasonic DC-ZS70 / TZ90, Pentax KP, Olympus E-PL3, Sony NEX5n, and Sony Alpha ILCE 9.
Updates and bug fixes are also an important part of this update. ON1 indicates that “several more performance upgrades and bug fixes including reduced memory footprint, increased stability and fixed user-reported issues” are included in ON1 Photo RAW 2017.5.
ON1 Photo RAW 2017.5 is available now with an introductory price of $99.99, regularly $119.99. Previous owners of ON1 Photo (or Perfect Photo Suite) can upgrade for just $79.99, regularly $99.99. For a limited time, ON1 Photo RAW 2017.5 is bundled with some excellent training materials. Four ON1 Photo RAW 2017.5 Master Courses by industry leading educator Matt Kloskowski and Director of Product Dan Harlacher are free with purchase. A full-functioning 30-day free trial is also available for download from the ON1 website.
One aspect of ON1 Photo RAW 2017 I like to point out is that the program includes activation via user account for up to five computers, meaning you can use it in different computers, beyond the usual limitation of two installations. It’s an interesting option if you move, for example, from home to office and also want to have the software on a laptop: that’s three computers with the same software installed.
Try it if you dare
For those who use the Cloud, it is important to know that ON1 Photo RAW 2017.5 also supports the key online storage services, including Dropbox, Google Drive, and Microsoft’s OneDrive. The program is also macOS and Microsoft Windows compatible and, for the sake if a link to the past, it also supports Adobe Photoshop CC or CS6, Lightroom CC/6, 5, Photoshop Elements 15, 14 and 13.
The next step is… more free updates coming to the program this Summer. Many of those updates reflect the feedback from users, as ON1 is trying to create a community that helps define the features which have to be prioritized. ON1 President Craig Keudell states, “We can’t be successful unless we listen to the photography community. Our main goal and something people rarely see from other companies, is the transparency with the way we develop our products. Several features and improvements in this release are the result of feedback from the ON1 community.”
In fact, ON1 users can go to the ON1 Photo Project, online, and submit ideas and feature requests. Every submission is reviewed and the more votes each idea or submission gets, the higher the likelihood it will get added into development of the app.
If you’ve read this far, then I’ve a challenge for you: get the full-functioning 30-day free trial available for download from the ON1 website and give it a try. Don’t install it as another layer to your existing workflow, don’t think of it as an extension of your LR or PS. Take, let me say it, the bull by the horns”, and give ON1 Photo 2017 a chance, as you probably did when Lightroom came out. Do you remember the excitement of all the things Lightroom represented when it was launched in 2006?
Well, with ON1 Photo RAW we’re exploring a new direction, as the ambitious editor is a mix that offers under the same name bits of Lightroom, Photoshop and the presets which were the core of ON1’s business, and adds its own flavour to the mix, with unique ways to put all those things together. Is it the perfect program? No, I don’t think it is, and for some people it may not be the ideal solution. But to really discover what it can and cannot do, one should use it on its own and not as an app for something else, because there is a full photo editor there, waiting to be found. Dare you try it?
The post ON1 Photo 2017 editor gets a major update appeared first on ProVideo Coalition.
First Found At: ON1 Photo 2017 editor gets a major update
0 notes
Text
How Your Website’s Theme Affects SEO & Rankings
The advent of CMS (Content Management Systems), such as WordPress, has revolutionized the internet, with around 5-10 websites being built every single second. If websites were built before only by professionals, today anyone can create a website in a matter of minutes, with little to no coding knowledge.
That creates lots of opportunities, but also comes clogged up with many problems.
After an easy 5 minutes install process, one of the first things most people want to do is customize the aspect of their new website. This isn’t hard to do. But how does the website’s theme influence your rankings and your overall SEO?
Why and How Do Themes Affect SEO?
Ugly Design Can Scare Users Away
Slow Speed Will Bore the Users to Death
Bad Structure Will Puzzle Search Engines
What Makes a Theme SEO Friendly?
HTML Markup
Speed & Page Size
Responsive Design & Images
Structured Data
Content Prioritization
API Hooks
How to Find an SEO Friendly Template
Check the Images
Check the Headings
Use the Rich Snippets Testing Tool
Send Them an E-mail
Fix the Theme Yourself
Why Are There So Many Bad SEO Themes Out There? (+ A Call to Developers)
Use Less Sliders (or ‘Useless’, You Can Read It Both Ways)
Optimize the Theme’s Core Images
Make Use of the ‘srcset’ As Much As Possible
Don’t Ignore PageSpeed Insights Completely
Minify the Codes If Possible
The problem, however, is that most users only think about the visual aspects of a theme, completely ignoring the technical ones. Even more, almost every template out there comes up with the phrase “SEO optimized” in the description, many times misleading the user into thinking it will solve SEO issues for them (more on that later in the article).
So after some time, when amateur webmasters start to learn about SEO, the question finally pops up:
“Should I change my template? Can the website theme affect my SEO?”
The short answer is yes, a theme can affect your SEO. I spotted what the source of the issues might be, and, to find out more, I took the effort to ask a couple of theme developers about it. Together, we came up with this article, intended to answer questions for both users and developers.
Knowing these technical aspects can help you make a more educated decision when purchasing a theme. You’ll still have to optimize your site for the best results, but the theme can help you solve a lot of problems from the start.
While I will be talking a lot about WordPress, these things apply to other CMSs, such as Joomla, Drupal and Magento.
Why and How Do Themes/Templates Affect SEO?
A long long time ago, SEO used to be very easy. Put up a bunch of keywords somewhere, and you were all set. If that wasn’t enough, just build some links and you’ll definitely rank.
Today, however, a lot more search ranking factors have been developed, from necessity. A lot of people have been abusing the old ways of doing SEO, so optimization had to adapt in order to return useful results for the users.
Design aside, themes and templates are a very big part of a website’s structure, and they also can affect speed. If you don’t get all of these three things lined up and working well together, you’re prone to see lower rankings, even if your content is good.
Ugly Design Will Scare the Users Away
If your design is too clogged up with things, it might turn off readers. You have to find a balance between ad and content placement, user experience and looks. Don’t think just about what you like, but think about what your target audience might like.
For example, many people tend to create their websites using a flat design, but sometimes, flat design actually causes confusion for the users because they have no idea where they can actually click. This can eventually affect your revenue and overall rankings.
You can clearly see at the bottom of the left picture that people focused more on the target link, because the target link was uppercase, bold, blue and underlined, instead of just having the same font. On the other side, people focused more on the heading, as the click signal was not strong enough.
Since the heading wasn’t actually clickable, this could have led to a bad user experience, as people would try to click the heading in vain. Google uses user experience as a ranking factor, so getting people to navigate your site easily is a good idea.
Sometimes, you have to give up on your favorite version of the design, simply because it doesn’t work as well. With a little bit of extra work you can find the right balance.
Slow Speed Will Bore the Users to Death
People hate it when they have to wait a long time for websites to load, and truth is most websites load really slow. On 3G mobile connections, the average load time for a website is 19 seconds. It’s estimated that about 50% of users leave a website if it takes more than 3 seconds to load. This will increase your bounce rate and reduce your revenue.
One of the solutions Google brought us are Accelerated Mobile Pages. However, these pages are still limited in a number of ways, and many webmasters don’t want to use them.
If a user leaves your website or blog before it even loads, clearly their experience with it was 0. Google notices this and tries to return the fastest loading results to its users.
You theme has to help the site load pages as fast as possible in order to keep visitors happy.
Bad Structure Will Puzzle Search Engines
Search engines don’t really see the website. Instead, they see the code behind it. If that code is not well structured, and HTML tags aren’t correctly placed, search engines won’t understand what the website is about very well.
For example, many templates could be using multiple H1 tags to style text on the homepage. Good for design, but bad for SEO. Hell, many templates could be ignoring the headings altogether, leaving your pages with just the title tag and some divs. Google can still understand the text in the divs, but the important content won’t be highlighted anymore.
Structure is also closely related to speed. The code has prioritized the loading of the visible content. This content is often referred to as ‘above the fold’. Even if your website loads fast, if certain elements that are towards the bottom of the page are loaded before the ones at the top of the page, search engines will notice it and consider it a bad practice.
What Makes a Theme SEO Friendly?
Let’s get things straight: a theme or template has the main purpose of making your website look good. Being SEO Friendly is a side benefit. But this side benefit is so demanded these days, that almost every theme out there is now “SEO Optimized” or “SEO friendly”.
Really. Go on and visit ThemeForest and check out the WooCommerce section. Open up the first 3 premium themes that pop-up and do a CTRL + F search for SEO.
Vlad Olaru from PixelGrade and Tom Usborne from Generatepress both disclose the SEO capabilities of themes and templates:
A WordPress theme does not represent a WordPress based website. It is a very important part of it but it has its limitations. A template can’t account for a bad server, not using a cache plugin or not writing relevant titles and content. VLAD OLARU Co-Founder and Developer at PixelGrade / @vladpotter
Content is the most important factor when it comes to ranking high, so the best thing a theme can do is keep things fast and let the content do the rest of the work. Thomas Usborne Founder and Developer at GeneratePress / @tomusborne
Sure, content is one of the most important parts of a website, and templates do not have full responsibility on making your website SEO friendly. They don’t affect things such as URLs or the entire site architecture.
However, what templates do affect is every single page on your website, be it in a negative way or in a positive way.
You see… a website template can be just like an uncomfortable suit. It looks good, but walking in it all day long doesn’t work too well.
So what exactly makes a theme SEO friendly?
I’ll give you a hint: having a titles and meta descriptions section built in a theme won’t make it SEO friendly. For that, we have WordPress SEO by Yoast. Adding options like these will only make it heavier.
That being said, here are some things to consider when determining the SEO friendliness of a template, from both Tom and Vlad, as well as cognitiveSEO:
HTML Markup:
The HTML is the most important part of a theme’s SEO friendliness. It stands at the core of what search engines see. Templates have to make it easy for search engines to digest the content of the website. The HTML5 tags must be wisely used in order to correctly highlight the most important parts of the content and their subordinates.
If the HTML doesn’t make sense, and title tags, for example, stand at the bottom of a page instead of the top, Google won’t like that. Now that is a very unlikely case, but as I said earlier, some premium themes completely miss out on all the headings.
Most web developers comply with quality guidelines when it comes to coding HTML, but if they don’t know the fact that H1 tags carry more weight in search engines, they won’t use them wisely.
Speed & Page Size:
People don’t like it when websites load slowly. A poorly developed theme can cause websites to load slowly. Of course, other factors are involved, such as the server or the user’s internet connection and device performance.
Still, a theme should first try to render the upper part of the website, called above the fold. If other elements from the bottom load before, the site will appear to be loading slowly.
When parts of the website start rendering chaotically, users might think the website is bugged out or broken. If you ever saw a website that first loads plain text and then renders the graphics and positions, you’ll know what I’m talking about.
The code files should take up as little space as possible. For example, calling a class twice will take up more space than just calling it once.
.class { text-align:center; } .class { color:red }
.class { text-align:center; color:red; }
Some files can also be minified, which will reduce download time even more.
Responsive Design & Images
Today, responsive design is the standard. If your website doesn’t load well on mobile devices, you can lose more than 50% of the traffic. Having a single design and code that fits all screen widths well is hard to achieve. Most responsive designs use the same CSS file for all widths, although there is an option to load them separately:
<link rel='stylesheet' media='screen and (min-width: 768px) and (max-width: 901px)' href='css/tablet.css' />
Although it’s good to save as many as possible, CSS codes don’t take up too much space.
Images, on the other side, are by far the most problematic thing when it comes to websites. It makes them slow, and displaying the perfectly sized image for each and every screen width is almost impossible. Developers should use the ‘srcset’ attribute on images to load the image size closest to the width of the screen. There’s no point in downloading a 1000×1000 pixels image if you’re going to display it as 500×500.
Structured Data
Schema.org markup is really useful for engines. This is especially the case when it comes to eCommerce sites. Search engines can display certain parts of your website directly in the search engine, making your result stand out. These results are called rich snippets.
One of the most common types of rich snippets is the review stars snippet:
Other snippets can include things such as the price:
Content Prioritization
A theme should effectively point out to the search engines which part of the content is most important and should also avoid creating duplicate content. Content tabs in highly customizable templates should use the proper HTML tags.
If you’re adding a ‘content section’ through a builder, that section should contain <p> tags. A ‘heading section’ should be wrapped up in H1, H2, H3 tags. If you can add an image somewhere, outside of the WordPress library, it should also have an ‘alt’ attribute.
Modifying codes for these kinds of features/builders can be a headache, so themes should take care of it from the beginning.
API Hooks
This is a rather technical aspect about the theme, which you can’t really find out without asking, but it’s a really important one. Without these Hooks, none of the helpful SEO plugins will be able to improve the performance of your website properly.
This means that any modification to your website will require custom theme intervention, which is usually very expensive.
How to Choose a Good Theme for SEO
Choosing a good theme from the start is the best thing you can do, but chances of you reading this article before creating your first website are small. Well, at least you can use this in the future.
If you think the current website template might be affecting your SEO and are planning to change it, make sure you also check out this redesign checklist, created especially to help you avoid any SEO disasters.
Furthermore, don’t get tricked by PageSpeed Insights! Although it’s a good way to determine the quality of a site’s HTML structure, PageSpeed Insights can sometimes be misleading, especially when looking on a demo theme.
Usually, PageSpeed Insights generates the scores accordingly. For example, if you have 100 images on your website, and 100 of them need optimization but you save only 10kb from all the optimizations, the score will be higher than if you had 100 images on your website and only 2 needed to be optimized, but the optimization would save 100kb.
But, in the following case, the SnapStore theme demo has an astonishing 0/100 PageSpeed Insights score. It’s the worst I’ve ever seen, but here’s the deal: although they should, developers won’t spend time on optimizing these pages. The servers could be bad, and these installs have no optimization plugins.
In this case, the biggest reason are the images, as they are all about 2MB in size. You can easily compress them from 2MB to 100KB and save 95% without losing any noticeable quality. I would post the difference, but I don’t want to load a 2MB file on this article. You can do the test anytime by downloading the first slider image from the theme with the Inspect Element tool. Use TinyPNG to compress the file, and compare the two versions.
While the images could be optimized, the truth is that’s your job, because you’ll change the presets anyway. The server response time also has a very big impact on the score, but that’s not your server, it’s theirs. Put this theme on a good server and you won’t have issues. Caching, again, is nothing theme related, so you can ignore it. That will be fixed by a plugin.
What about the render-blocking JavaScript? Surprise! It’s actually Google. You have no control on some of the JS files such as Analytics, Tag Manager or the fonts. Tom from GeneratePress also pointed this out to me: Google errors their own JS files in PageSpeed Insights.
The only thing that’s left is Minification, which can be in fact fixed with a plugin as well.
Check the Images
As I mentioned, most of the images on the template will be replaced. It’s your duty to make sure you filter them through a website like TinyPNG or a plugin like WP Smush. The only images you should check for compression are the core images of the theme. I’m talking about any icons, backgrounds and images you won’t be replacing.
A more important thing is whether the images are using the ‘srcset’ attribute. This will make them load proper versions for each screen size. To do this, right click an image in Chrome and click Inspect.
As you can see above, both GeneratePress and Silk (a PixelGrade theme) take advantage of the ‘srcset’ attribute to properly display images on different screen sizes.
Most of the time, WooCommerce templates will use this function only for products images, because it’s a basic WooCommerce feature. However, they might miss other areas, such as page builders. Make sure you check more than one image, from more than one page.
Check the Headings
If you’re looking for a customizable theme, make sure the customization options use the code and tags wisely.
Hit up CTRL + U on your demo theme and do a search for ‘<h1’ and ‘<h2’, without the quote marks. If no headings pop up, then something is strange. Each page should have an H1 tag. No more, no less. There can me multiple H2 tags, but if each of them has a different font style and size, then something is fishy.
Sometimes, the designers trick you with the looks. Take a look at this beauty, for example:
If you look at the headline as a human, you will read “We are experts if it comes to watches.” Read the headline as a search engine, however, and it’s a completely different story:
It now reads “We are if it comes” and “Experts to watches”. Not good for SEO if you’re trying to match some keywords in your headline.
Use the Rich Snippets Testing Tool
If you’re looking at an eCommerce template, you should check out the structured data markup with Google’s structured data testing tool. Check out the homepage, as well as single product pages, category pages and articles.
Take a look at the product page, and check out the product attribute. Make sure it has no errors.
Sometimes articles also have the schema.org markup for recipes. You can view more structured data markup types here. If anything fits your niche, you should try to find a template that provides this.
Send Them an E-mail:
Send an e-mail to the developers, asking them about the features of the theme. If they respond fast, that’s a good sign. It means that they are active and ready to support you if you have any issues with the tempalte.
As almost nobody posts this, you can also ask for a screenshot of the backend section, so you can view the theme from the inside. Ask the developers any questions regarding the points mentioned above.
It’s also a good time to ask if the template uses the default WordPress Hooks that make the template compatible with other plugins.
Fix the Theme Yourself
You don’t always have to choose the best theme. You can always fix most of the things. There’s only one little issue. The whole site might crash.
Start by adding a caching plugin. This will speed up the site for recurring users. Then, add an image optimization plugin to make your images take up less space. Last but not least, try a minification plugin. However, be careful, as minifying theme files can cause render issues or crashes.
Minifying a theme’s CSS, JS and HTML using a plugin can affect how a theme displays and potentially crash the whole site.
Why Are There So Many Bad SEO Themes Out There? A Call to Developers
Now both Tom and Vlad built incredibly good themes, both SEO friendly and customizable. But out there, there are a lot of themes that don’t focus on SEO at all. There could be many reasons why this is happening.
Theme developers try to figure out the users’ intent and needs. The truth is, users look for the most features they can get in a single place, at a low price. But, one theme can’t fit them all. Having everything (which you never use) in a single template is just gonna make your site heavy and slow. For example, if you don’t use a slider on a specific page, the JS slider script might still be downloaded, making your site slower. This isn’t always the theme’s fault, as plugins usually generate codes like that as well.
So from this rush of making hundreds and hundreds of themes to fit everyone’s needs, bad ones turn out as well.
Another thing could be that developers simply don’t think about SEO. But since Google is desperately trying to speed up the internet with things like Google AMP or clean it with things like the interstitials penalty, it is obvious that they should.
Use Less Sliders (or ‘Useless’, You Can Read It Both Ways)
Almost every site there has a slider. But sliders aren’t that cool. Even Yoast agrees on this one. Sliders are slow and they require a lot of coding to get them to work. Animated ones even load dozens of images, creating multiple requests to the server and adding to the overall page size.
The truth is people only see the first slide most of the time. They rarely click sliders. Multiple offers on the same page can also be very confusing. You’d be better off just displaying a single image with your best overall offer.
Optimize the Theme’s Core Images
Of course, you can’t make sure the users add their titles, content and images correctly, but themes do have images by default, such as backgrounds and social media sharing buttons. They might not seem relevant, but saving even 10 KB in size could make your site load faster. If your total page size is 100KB, that would be a 10% improvement.
There are also many images from your theme that people might like and just leave them there. If they aren’t generated from the media gallery so they can be optimized by a plugin, then they should come optimized by default. Most users aren’t very tech savvy and won’t know how to deal with it themselves.
Make Use of the ‘srcset’ Attribute As Much As Possible
Responsive is hard and frustrating. But it’s awesome and it looks fantastic. Try to also make it load fast by not wasting time to load big images and display them small. Always use the ‘srcset’ image attribute. Even if it’s a photographer’s website, you still don’t need the full images. You can load them separately when a click occurs.
There is an option for backgrounds too. It’s still in development and only supported by the major browsers, but it’s there. Use it wisely if you every need to add background images on responsive designs.
Don’t Ignore PageSpeed Insights Completely
Yeah, it’s funny. Google fails by returning errors to their own files. But that’s not the point. The point is for you to spot issues that you can fix, and fix them.
But think about it like this:
Since Google recommends using it, they are probably using those things to rank websites as well. It must have at least a slight impact on the algorithm’s decisions.
Speed isn’t always the answer for crawlers and bots as speed is relative to the connections. The structure of the page is absolute. If you have a really fast web hosting and your users also have strong connections and computers, that doesn’t mean you should ignore the structure.
Minify the Codes If Possible
I know you like your code pretty. I do as well. But on the web, speed is of the essence. The code lies behind what the user can see, and search engines can very well understand minified code, even though it might be hard to decipher by humans. This also applies to plugin developers, as many theme developers actively implement plugins into their themes.
Rarely will someone take a look at the underlying code, and if they do, you probably don’t want them to understand anything. It makes it harder for them to copy something you did. If they want to know something, they might as well ask you directly.
I know that there are plugins out there that can minify code, but they can and most of the time WILL create problems. Minify as much code as possible on your live versions so that your users don’t risk breaking their sites.
Conclusion
As you can see, themes don’t only impact the design of a website, but SEO as well. If your theme doesn’t help with making your website quick for users and easy to read for search engines, it will affect you in a negative way, and can sabotage tyour entire campaign on the long run.
Make sure you check some of the things mentioned in this article the next time you’re searching for a new website template.
I want to thank Tom and Vlad very much for helping us create this resource. If any of you have questions or opinions, feel free to leave them in the comments section.
The post How Your Website’s Theme Affects SEO & Rankings appeared first on SEO Blog | cognitiveSEO Blog on SEO Tactics & Strategies.
0 notes